<template>
	<view class="myPage bgF5" :style="{ '--color': color, '--total-height': totalHeight + 'px' }">
		<status-bar
			:title="tabTitle"
			back="0"
			:showSetting="vid ? 1 : 0"
			v-if="!pageSet.immerse || toTop"></status-bar>

		<!-- 普通电商 -->
		<view
			class="top_0 auto100"
			:class="{ pTop: pageSet.immerse, thmeBg: !pageSet.topBgImg }"
			v-if="pageSet.style == 0"
			:style="{
				backgroundImage: pageSet.topBgImg ? 'url(' + pageSet.topBgImg + ')' : 'none',
			}">
			<view class="d-flex a-center white m-bot40">
				<image
					:src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)"
					mode="aspectFill"
					@click="toUrl('/userPage/user/userinfo')"
					class="avatar bor_radius m-right20"></image>
				<view class="flex-1" v-if="userinfo">
					<view class="size32 bold ellipsis m-bot10">{{ userinfo.nickName }}</view>
					<view
						class="bgwhite bor_radius_20 padding2-14 size22 thmeColor"
						v-if="userinfo.vipId"
						style="width: fit-content"
						>{{ userinfo.vipName }}</view
					>
				</view>
				<view class="flex-1 size32 bold" v-else @click="showModal = true">登录/注册</view>
				<view class="text-center" @click="toSign" v-if="pageSet.showSignIn == 1">
					<text class="iconfont icon-qiandao size40 p-left20 p-right20"></text>
					<view class="m-top4">签到</view>
				</view>
				<view
					class="text-center"
					@click="toUrl('/userPage/message/messageList')"
					v-if="startUp.service_state == 1 && pageSet.showMessage == 1">
					<text
						class="iconfont icon-conversation_icon size40 p-left20 p-right20"
						:class="{ unread: parseInt(userinfo.unreadMsg) }"
						:data-num="userinfo.unreadMsg"></text>
					<view class="m-top4">消息</view>
				</view>
			</view>
			<view class="d-flex white m-bot40">
				<view class="text-center flex-1" @click="toUrl('/userPage/sign/integralRecord')">
					<view class="size36 bold">{{ userinfo.sign || 0 }}</view>
					<view class="m-top10">{{ nameDefinition.fenTitle || '积分' }}</view>
				</view>
				<view class="text-center flex-1" @click="toUrl('/moneyPage/capital/myMoney')">
					<view class="size36 bold">{{ money }}</view>
					<view class="m-top10">
						{{ nameDefinition.balanceTitle || '余额' }}({{ unit
						}}{{ nameDefinition.balanceUnit || '元' }})
					</view>
				</view>
				<view class="text-center flex-1" @click="toUrl('/userPage/user/discount_coupon')">
					<view class="size36 bold">{{ userinfo.couponCount || 0 }}</view>
					<view class="m-top10">优惠券</view>
				</view>
				<view
					class="text-center flex-1"
					@click="toUrl('/moneyPage/capital/withdraws')"
					v-if="userinfo.income > 0">
					<view class="size36 bold">{{ parseFloat(userinfo.income) }}</view>
					<view class="m-top10"
						>可提现<text class="iconfont icon-xiangyouxiayiye size22 white"></text
					></view>
				</view>
			</view>
			<view class="collect bor_radius_top20 d-flex j-sa color_f2">
				<view @click="toUrl('/userPage/user/followList')"
					>关注 {{ userinfo.followCount || 0 }}</view
				>
				<view @click="toUrl('/userPage/user/CollectList')"
					>收藏 {{ userinfo.collectCount || 0 }}</view
				>
				<view @click="toUrl('/userPage/user/viewed')">足迹 {{ footprint }}</view>
			</view>
			<!-- 会员 -->
			<view class="grade bg33 bor_radius_top20 color_FC0">
				<view class="wh p-left20 d-flex f-column j-centert p-re" v-if="userinfo">
					<view class="m-bot10">{{ userinfo.vipName }}</view>
					<view class="size40">{{ userinfo.sn_id }}</view>
					<view
						class="right p-ab"
						@click="
							toUrl(
								'/userPage/user/introduce?type=1&title=' + configJson.entrance_name,
								false
							)
						"
						v-if="configJson.content">
						<text>{{ configJson.entrance_name }}</text>
						<text class="iconfont icon-xiangyouxiayiye h6 color_FC0"></text>
					</view>
					<view
						class="up padding10-30 white bold p-ab"
						v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0"
						@click="toUrl('/pages/Vip/Vip')"
						>升级{{ userinfo.nextLevel.vipName }}会员</view
					>
				</view>
				<view class="wh flexac size26" v-else @click="showModal = true"
					>点击登录获取会员权益</view
				>
			</view>
		</view>

		<!-- 餐饮 -->
		<view class="top_1 p-re" v-if="pageSet.style == 1">
			<view
				class="back auto100 p-ab p-top30"
				:style="{
					backgroundImage: pageSet.topBgImg ? 'url(' + pageSet.topBgImg + ')' : 'none',
				}"
				:class="{ pTop: pageSet.immerse, thmeBg: !pageSet.topBgImg }">
				<view class="text-right white p-right24">
					<text
						class="iconfont icon-qiandao size44"
						@click="toSign"
						v-if="pageSet.showSignIn == 1"></text>
					<text
						class="iconfont icon-conversation_icon size44 m-left30"
						:class="{ unread: parseInt(userinfo.unreadMsg) }"
						:data-num="userinfo.unreadMsg"
						@click="toUrl('/userPage/message/messageList')"
						v-if="startUp.service_state == 1 && pageSet.showMessage == 1"></text>
				</view>
			</view>
			<view class="card zIndex cardBg">
				<image
					:src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)"
					mode="aspectFill"
					@click="toUrl('/userPage/user/userinfo')"
					class="bulge bgwhite bor_radius p-ab"></image>
				<view class="flexac m-bot24" v-if="userinfo">
					<view class="size32 bold">{{ userinfo.nickName }}</view>
					<view
						class="bgFC3 bor_radius_10 padding2-14 size22 m-left10 f-shrink-0"
						v-if="userinfo.vipId">
						{{ userinfo.vipName }}
					</view>
				</view>
				<view class="size32 bold m-bot24 text-center" v-else @click="showModal = true"
					>登录/注册</view
				>
				<view
					class="color_66 m-bot24 text-center"
					v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0"
					@click="toUrl('/pages/Vip/Vip')">
					<text>升级获得{{ userinfo.nextLevel.vipName }}会员权益</text>
					<text class="iconfont icon-xiangyouxiayiye h6 color_66"></text>
				</view>
				<view class="d-flex a-center m-bot24">
					<view class="flex-1 flexac" @click="toUrl('/moneyPage/capital/myMoney')">
						<image
							:src="imgUrl + 'Uploads/diy/userCenter/balance.png'"
							mode="widthFix"
							style="width: 90rpx"></image>
						<view class="m-left20">
							<view class="h7"
								><text class="size42">{{ money }}</text
								>{{ unit }}{{ nameDefinition.balanceUnit || '元' }}</view
							>
							<view class="color_66 m-top4">{{
								nameDefinition.balanceTitle || '余额'
							}}</view>
						</view>
					</view>
					<view class="line bgdd"></view>
					<view class="flex-1 flexac" @click="toUrl('/userPage/user/discount_coupon')">
						<image
							:src="imgUrl + 'Uploads/diy/userCenter/coupon.png'"
							mode="widthFix"
							style="width: 90rpx"></image>
						<view class="m-left20">
							<view class="h7"
								><text class="size42">{{ userinfo.couponCount || 0 }}</text
								>张</view
							>
							<view class="color_66 m-top4">优惠券</view>
						</view>
					</view>
				</view>
				<view class="bgF5 bor_radius_10 d-flex a-center" style="height: 132rpx">
					<view class="w-25 text-center" @click="toUrl('/userPage/sign/integralRecord')">
						<view class="size42">{{
							userinfo.sign > 9999 ? '9999+' : userinfo.sign || 0
						}}</view>
						<view class="color_66 m-top4">{{ nameDefinition.fenTitle || '积分' }}</view>
					</view>
					<view class="w-25 text-center" @click="toUrl('/userPage/user/CollectList')">
						<view class="size42">{{ userinfo.collectCount || 0 }}</view>
						<view class="color_66 m-top4">收藏</view>
					</view>
					<view class="w-25 text-center" @click="toUrl('/userPage/user/followList')">
						<view class="size42">{{ userinfo.followCount || 0 }}</view>
						<view class="color_66 m-top4">关注</view>
					</view>
					<view class="w-25 text-center" @click="toUrl('/userPage/user/viewed')">
						<view class="size42">{{ footprint }}</view>
						<view class="color_66 m-top4">足迹</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 京东 -->
		<view
			class="top_2 auto100"
			:class="{ pTop: pageSet.immerse }"
			:style="{
				backgroundImage: pageSet.topBgImg ? 'url(' + pageSet.topBgImg + ')' : 'none',
			}"
			v-if="pageSet.style == 2">
			<view class="d-flex p-left6 p-right6 m-bot24">
				<image
					:src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)"
					mode="aspectFill"
					@click="toUrl('/userPage/user/userinfo')"
					class="avatar bor_radius m-right20"></image>
				<view class="flex-1">
					<view class="d-flex a-center f-wrap m-bot10" v-if="userinfo">
						<view class="size34 bold">{{ userinfo.nickName }}</view>
						<view
							class="bgFC3 bor_radius_10 padding2-14 size22 m-left10"
							v-if="userinfo.vipId"
							>{{ userinfo.vipName }}
						</view>
					</view>
					<view class="size34 bold m-bot10" v-else @click="showModal = true"
						>登录/注册</view
					>
					<view class="size28" @click="toUrl('/moneyPage/capital/myMoney')">
						{{ nameDefinition.balanceTitle || '余额' }} ￥{{ money }}
						<text class="h7">{{ unit }}{{ nameDefinition.balanceUnit || '元' }}</text>
					</view>
				</view>
				<text
					class="iconfont icon-qiandao size44"
					@click="toSign"
					v-if="pageSet.showSignIn == 1"></text>
				<text
					class="iconfont icon-a-zu1870 size44 m-left30"
					:class="{ unread: parseInt(userinfo.unreadMsg) }"
					:data-num="userinfo.unreadMsg"
					@click="toUrl('/userPage/message/messageList')"
					v-if="startUp.service_state == 1 && pageSet.showMessage == 1"></text>
			</view>
			<view class="p-re m-bot24" v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0">
				<image :src="imgUrl + 'Uploads/diy/userCenter/vipImg.png'" mode="widthFix"></image>
				<view class="up d-flex a-center white bold p-ab" @click="toUrl('/pages/Vip/Vip')">
					<text class="m-right10">升级会员</text
					><text class="iconfont icon-a-RectangleCopy size16"></text>
				</view>
				<view class="next wh d-flex a-center p-ab">
					<view class="size28 m-top20 f-shrink-0">{{ userinfo.nextLevel.vipName }}</view>
					<view class="size26 ellipsis_2">{{ userinfo.nextLevel.vipInfo }}</view>
				</view>
			</view>
			<view class="bgwhite bor_radius_10 d-flex a-center" style="height: 132rpx">
				<view class="w-20 text-center" @click="toUrl('/userPage/sign/integralRecord')">
					<view class="size42">{{
						userinfo.sign > 9999 ? '9999+' : userinfo.sign || 0
					}}</view>
					<view class="size26 color_66 m-top10">{{
						nameDefinition.fenTitle || '积分'
					}}</view>
				</view>
				<view class="w-20 text-center" @click="toUrl('/userPage/user/discount_coupon')">
					<view class="size42">{{ userinfo.couponCount || 0 }}</view>
					<view class="size26 color_66 m-top10">优惠券</view>
				</view>
				<view class="w-20 text-center" @click="toUrl('/userPage/user/CollectList')">
					<view class="size42">{{ userinfo.collectCount || 0 }}</view>
					<view class="size26 color_66 m-top10">收藏</view>
				</view>
				<view class="w-20 text-center" @click="toUrl('/userPage/user/followList')">
					<view class="size42">{{ userinfo.followCount || 0 }}</view>
					<view class="size26 color_66 m-top10">关注</view>
				</view>
				<view class="w-20 text-center" @click="toUrl('/userPage/user/viewed')">
					<view class="size42">{{ footprint }}</view>
					<view class="size26 color_66 m-top10">足迹</view>
				</view>
			</view>
		</view>

		<!-- 淘宝 -->
		<view
			class="top_3 auto100 p-top40"
			:class="{ pTop: pageSet.immerse, bgwhite: !pageSet.topBgImg }"
			v-if="pageSet.style == 3"
			:style="{
				backgroundImage: pageSet.topBgImg ? 'url(' + pageSet.topBgImg + ')' : 'none',
			}">
			<view class="d-flex p-left40 p-right40 m-bot30">
				<image
					:src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)"
					mode="aspectFill"
					@click="toUrl('/userPage/user/userinfo')"
					class="avatar bor_radius m-right20"></image>
				<view class="flex-1 a-self-center">
					<view class="d-flex a-center f-wrap m-bot10" v-if="userinfo">
						<view class="size34 bold">{{ userinfo.nickName }}</view>
						<view
							class="bgFC3 bor_radius_10 padding2-14 size22 m-left10"
							v-if="userinfo.vipId"
							>{{ userinfo.vipName }}
						</view>
					</view>
					<view class="size34 bold m-bot10" v-else @click="showModal = true"
						>登录/注册</view
					>
					<view class="size28 m-bot10" v-if="Result.userInfo">{{
						Result.userInfo.desensitizationPhone
					}}</view>
					<view class="d-flex a-center">
						<view class="size26" @click="toUrl('/userPage/user/followList')"
							>关注 {{ userinfo.followCount || 0 }}</view
						>
						<view class="line"></view>
						<view class="size26" @click="toUrl('/userPage/user/CollectList')"
							>收藏 {{ userinfo.collectCount || 0 }}
						</view>
						<view class="line"></view>
						<view class="size26" @click="toUrl('/userPage/user/viewed')"
							>足迹 {{ footprint }}</view
						>
					</view>
				</view>
				<view class="text-center" @click="toSign" v-if="pageSet.showSignIn == 1">
					<text class="iconfont icon-qiandao size40 p-left20 p-right20"></text>
					<view class="m-top4">签到</view>
				</view>
				<view
					class="text-center"
					@click="toUrl('/userPage/message/messageList')"
					v-if="startUp.service_state == 1 && pageSet.showMessage == 1">
					<text
						class="iconfont icon-conversation_icon size40 p-left20 p-right20"
						:class="{ unread: parseInt(userinfo.unreadMsg) }"
						:data-num="userinfo.unreadMsg"></text>
					<view class="m-top4">消息</view>
				</view>
			</view>
			<view class="grade padding20 white">
				<view
					class="d-flex a-center"
					v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0">
					<view class="size32 bold m-right20">{{ userinfo.nextLevel.vipName }}</view>
					<view class="flex-1 ellipsis m-right20">{{ userinfo.nextLevel.vipInfo }}</view>
					<view class="btn bgwhite bold" @click="toUrl('/pages/Vip/Vip')">升级会员</view>
				</view>
				<view class="d-flex a-center" v-else-if="userinfo.thisLevel">
					<view class="size32 bold m-right20" v-if="userinfo.vipId">{{
						userinfo.vipName
					}}</view>
					<view class="flex-1 ellipsis m-right20">{{ userinfo.thisLevel.vipInfo }}</view>
					<view
						class="btn bgwhite bold"
						@click="
							toUrl(
								'/userPage/user/introduce?type=1&title=' + configJson.entrance_name,
								false
							)
						"
						v-if="configJson.content"
						>{{ configJson.entrance_name }}</view
					>
				</view>
				<view class="size26 text-center" v-else @click="showModal = true"
					>点击登录获取会员权益</view
				>
			</view>
			<view class="arc bgF5 d-flex a-center zIndex">
				<view class="text-center flex-1" @click="toUrl('/moneyPage/capital/myMoney')">
					<view class="size40 color_33">{{ money }}</view>
					<view class="size26 color_66 m-top10">
						{{ nameDefinition.balanceTitle || '余额' }}({{ unit
						}}{{ nameDefinition.balanceUnit || '元' }})
					</view>
				</view>
				<view class="bgdd"></view>
				<view class="text-center flex-1" @click="toUrl('/userPage/sign/integralRecord')">
					<view class="size40 color_33">{{ userinfo.sign || 0 }}</view>
					<view class="size26 color_66 m-top10">{{
						nameDefinition.fenTitle || '积分'
					}}</view>
				</view>
				<view class="bgdd"></view>
				<view class="text-center flex-1" @click="toUrl('/userPage/user/discount_coupon')">
					<view class="size40 color_33">{{ userinfo.couponCount || 0 }}</view>
					<view class="size26 color_66 m-top10">优惠券</view>
				</view>
			</view>
		</view>

		<!-- 组件 -->
		<view v-if="pageData.length">
			<block v-for="(item, index) in pageData" :key="index">
				<gridCard
					v-if="item.type == 'gridCard'"
					:pageData="item.compCont"
					:orderCount="orderCount"
					:Result="Result"
					:userinfo="userinfo"
					:configJson="configJson"
					@openModal="showModal = true"
					@openDeposit="isDeposit = true">
				</gridCard>
				<Bannel
					v-if="item.type == 'banner'"
					:pageData="item.compCont"
					:isImmerse="1"></Bannel>
				<adv v-if="item.type == 'advertisement'" :pageData="item.compCont"></adv>
				<hotZone v-if="item.type == 'hotZone'" :pageData="item.compCont"></hotZone>
				<divider v-if="item.type == 'divider'" :pageData="item.compCont"></divider>
			</block>
		</view>

		<!-- 关注公众号 -->
		<image
			:src="imgUrl + '/Uploads/singleSale/singleSaleShopH5/demoTpl/2/static/icon/WeChat.png'"
			mode="widthFix"
			class="follow_btn bor_radius"
			v-if="wxQRCode"
			@click="wxQRCode_switch = true"></image>

		<!-- 弹框识别公众号 -->
		<view class="mask flexac f-column" v-if="wxQRCode && wxQRCode_switch">
			<image
				:show-menu-by-longpress="true"
				:src="$imgUrls(wxQRCode)"
				mode="widthFix"
				class="viewbox5"></image>
			<text class="iconfont icon-guanbi size60" @click="wxQRCode_switch = false"></text>
		</view>

		<Deposit :isDeposit="isDeposit" :userinfo="userinfo" @close="closeDeposit"></Deposit>
		<showModel @cancelFunc="closeModel" goHome="0" v-if="showModal" type="2"></showModel>
		<contact v-if="pageSet.style != undefined"></contact>
		<tabBar :tab="2"></tabBar>
	</view>
</template>

<script>
	import contact from '@/components/contact/contact.vue';
	import Deposit from '@/components/User/Deposit.vue';
	import { mapState } from 'vuex';
	import gridCard from '@/components/User/gridCard.vue';
	import Bannel from '@/components/home/Bannel.vue';
	import adv from '@/components/home/adv.vue';
	import hotZone from '@/components/home/hotZone.vue';
	import divider from '@/components/home/divider.vue';
	export default {
		components: {
			contact,
			Deposit,
			gridCard,
			Bannel,
			adv,
			hotZone,
			divider,
		},
		data() {
			return {
				imgUrl: this.imgUrl,
				Result: '',
				userinfo: '', // 用户信息
				configJson: '', // 会员卡信息
				orderCount: '',
				money: 0,
				unit: '',
				wxQRCode: '',
				wxQRCode_switch: false,
				signInState: '0', // 活动开启 1开启 0未开启  未开启则去旧签到功能界面
				footprint: 0, // 足迹
				isDeposit: false, // 退押金
				noPayOrde: {}, // 仓库数量
				toTop: false,
				showModal: false,
				pageSet: {
					// 页面设置
					immerse: true,
					topBgImg: '',
				},
				pageData: '', // diy组件
			};
		},
		onLoad() {
			this.diyget();
		},
		onShow() {
			this.getUserinfo();
			this.getBasicInfo();
		},
		methods: {
			diyget() {
				this.$http
					.get({
						url: '/newdiy/api/v1/diy/getDiyPage',
						data: {
							front: 1,
							type: 5,
						},
					})
					.then((res) => {
						if (res.data) {
							if (res.data.pageSet) {
								this.pageSet = res.data.pageSet;
								this.pageData = res.data.front_value || [];
							} else {
								// 新建了但未点保存
								this.initSet();
							}
						} else {
							// 未新建模板
							this.initSet();
						}
					});
			},
			initSet() {
				// 默认配置
				this.pageSet.style = 0;
				this.pageSet.showSignIn = 1;
				this.pageSet.showMessage = 1;
				this.pageData = [
					{ type: 'gridCard', compCont: { template: 1, title: '订单中心' } },
					{ type: 'gridCard', compCont: { template: 2, title: '仓库中心' } },
					{ type: 'gridCard', compCont: { template: 4, title: '常用功能' } },
				];
			},
			closeDeposit() {
				this.isDeposit = false;
				this.getUserinfo();
			},
			getBasicInfo() {
				this.$http
					.post({
						url: '/zzj_singleSaleApi/getMyOrderBasicInfo',
					})
					.then((res) => {
						if (res.errcode != '100') return that.$Toast(res.msg);
						this.noPayOrde = res.data;
					});
			},
			toSign() {
				if (this.signInState == 1) {
					this.toUrl('/userPage/sign2/sign_in');
				} else {
					this.toUrl('/userPage/sign/sign_in');
				}
			},
			closeModel() {
				this.showModal = false;
				this.getUserinfo();
			},
			toUrl(url, flag = true) {
				// flag:是否判断vid
				if (flag && (!this.vid || this.vid == 0)) {
					this.showModal = true;
					return;
				}
				if (url) {
					if (url == '/userPage/login/binding?type=1') {
						// #ifdef MP-WEIXIN
						this.showModal = true;
						return;
						// #endif
					}
					uni.navigateTo({
						url: url,
					});
				}
			},
			getUserinfo() {
				// 获取用户信息
				this.$http
					.post({
						url: '/SRA_userIntegral/myInfo',
						data: {
							VeriCode: this.bid,
							vId: this.vid,
						},
					})
					.then((res) => {
						if (res.data) {
							this.Result = res.data;
							this.signInState = res.data.signInState;
							if (res.data.myJson) {
								this.userinfo = res.data.myJson;
								this.orderCount = res.data.myJson.order_count;
								var m = parseFloat(res.data.myJson.money);
								if (m > 9999) {
									this.unit = '万';
									// 保留两位小数、不四舍五入
									// m = (m / 10000).toFixed(2)
									m = Math.floor((m / 10000) * 100) / 100;
								}
								this.money = m;
							}
							if (res.data.configJson) {
								this.configJson = res.data.configJson;
								this.wxQRCode = res.data.configJson.wxQRCode; // 公众号二维码
							}
							this.getHistory();
						} else {
							this.userinfo = '';
							this.orderCount = '';
							this.money = 0;
						}
					});
			},
			getHistory() {
				// 获取足迹
				this.$http
					.post({
						url: '/singleSaleApi/footprint',
					})
					.then((res) => {
						this.footprint = res.count || 0;
					});
			},
		},

		computed: {
			...mapState([
				'vid',
				'bid',
				'logo',
				'nameDefinition',
				'startUp',
				'color',
				'tabTitle',
				'share',
				'totalHeight',
			]),
		},

		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.toTop = true;
			} else {
				this.toTop = false;
			}
		},
		onShareAppMessage() {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: `${share.imageUrl}`,
			};
		},
	};
</script>

<style scoped lang="scss">
	.myPage {
		min-height: 100vh;
		background-image: url('https://msraimgcdn.mogoie.com/6150/1735379983203.jpg');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.top_0 {
		padding: 24rpx 24rpx 0 24rpx;

		.avatar {
			width: 100rpx;
			height: 100rpx;
		}

		.collect {
			line-height: 50rpx;
			margin: 0 24rpx;
			background: #666;
		}

		.grade {
			height: 130rpx;

			.right {
				right: 20rpx;
				bottom: 20rpx;
			}

			.up {
				background: #ff6600;
				border-radius: 0 20rpx 0 20rpx;
				right: 0;
				top: 0;
			}
		}
	}

	.top_1 {
		padding: 340rpx 24rpx 0 24rpx;

		.back {
			width: 100%;
			height: 428rpx;
			top: 0;
			left: 0;
			border-radius: 0 0 50% 50%/5%;
		}
		.cardBg {
			background-color: rgba(255, 255, 255, 0.6);
		}
		.card {
			padding: 88rpx 24rpx 24rpx 24rpx;
			border-radius: 10rpx 10rpx 0 0;

			.bulge {
				width: 128rpx;
				height: 128rpx;
				left: 50%;
				top: -74rpx;
				margin-left: -74rpx;
				border: 10rpx solid #fff;
			}

			.line {
				width: 1rpx;
				height: 60rpx;
			}
		}
	}

	.top_2 {
		padding: 24rpx 24rpx 0 24rpx;

		.avatar {
			width: 90rpx;
			height: 90rpx;
		}

		.up {
			left: 50rpx;
			top: 8rpx;
			z-index: 10;
		}

		.next {
			left: 0;
			top: 0;
			color: #c48a40;

			> view {
				padding: 0 30rpx;

				&:first-child {
					width: 240rpx;
					color: #7f500a;
				}
			}
		}
	}

	.top_3 {
		.avatar {
			width: 120rpx;
			height: 120rpx;
		}

		.line {
			width: 1rpx;
			height: 20rpx;
			background: #999;
			margin: 0 20rpx;
		}

		.grade {
			background: linear-gradient(45deg, #ffae53, #fd7230);
			border-radius: 40rpx 40rpx 0 0;
			margin: 0 40rpx;
			transform: translateY(2rpx);

			.btn {
				padding: 0 18rpx;
				line-height: 42rpx;
				border-radius: 21rpx;
				color: #ff6600;
			}
		}

		.arc {
			border-radius: 50rpx 50rpx 0 0;
			padding: 40rpx 0 16rpx 0;

			.bgdd {
				width: 1rpx;
				height: 64rpx;
			}
		}
	}

	.pTop {
		padding-top: var(--total-height);
	}

	.auto100 {
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.follow_btn {
		width: 80rpx;
		height: auto;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		right: 24rpx;
		bottom: calc(150rpx + constant(safe-area-inset-bottom));
		bottom: calc(150rpx + env(safe-area-inset-bottom));
		z-index: 30;
	}

	.viewbox5 {
		height: auto;
	}

	.avatar {
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}
</style>
